<template>
	<view class="detail-page">
		<div class="post-wrap wrap">
			<div class="left">
				<span>{{detail.job_name}}</span>
				<p>{{detail.company_district}}{{detail.company_district}} ｜ {{detail.educate_name}} ｜
					{{detail.exp_name}}
				</p>
			</div>
			<div class="price">{{detail.salary_name}}</div>
		</div>
		<div class="post-person-wrap wrap">
			<div class="avatar">
				<image :src="detail && detail.header || require('../../static/image/avatar.png')" mode=""></image>
			</div>
			<div class="info">
				<h4>{{detail.nickname}}</h4>
				<p>{{detail.name}} · {{detail.company_name}}</p>
			</div>
		</div>

		<div class="job-intro wrap">
			<h3>职位介绍</h3>
			<div class="labels">
				<div class="label">{{detail.need}}</div>
			</div>
			<div class="msg" :class="{'msg-more': msgMore}">
				<span>职位描述：</span> <br />
				{{detail.intro}}
			</div>
			<span class="more" @click="onClickMoreMsg">{{msgMore ? '收起' : '查看全部'}}</span>
		</div>

		<!-- 公司 -->
		<div class="company wrap">
			<!-- 公司信息 -->
			<div class="company-info" @click="onClickCompany">
				<div class="info">
					<div class="avatar">
						<image :src="detail.company_header" mode=""></image>
					</div>
					<div class="name-info">
						<span>{{detail.company_name}}</span>
						<p>{{detail.job_cate_name}}</p>
					</div>
				</div>
			</div>
			<!-- 公司地址 -->
			<map name="" @tap="openMap" :markers="covers" :longitude="detail.lat" :latitude=" detail.lon"></map>

		</div>

		<div class="more-post wrap">
			<h3>更多职位</h3>
			<div class="list">
				<div class="item" @click="() => onClickDetail(item)" v-for="(item,index) in companyList" :key="index">
					<div class="item-title">
						<div class="info">
							<image :src="item.company_header" mode=""></image>
							<span>{{item.company_name}}</span>
						</div>
						<div class="price">{{item.salary}}</div>
					</div>
					<div class="post">
						<span>{{item.name}}</span>
						<p><template v-if="item.showrule.length > 0">
								{{item.show_rule[0].name}} {{item.show_rule[1] && item.show_rule[1].name || ''}}
							</template>
						</p>
					</div>
					<div class="bottom">
						<div class="labels">
							<div class="label" v-for="(label,key) in item.show_tag" :key="key">{{label.name}}</div>
						</div>
						<div class="address">{{item.company_city}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="action-wrap">
			<div class="btn-wrap">
				<button @click="onClickDelivery">发送简历</button>
				<button @click="onClickChart">立即沟通</button>
			</div>
			<!-- <div class="mobile-wrap" @click="onClickPhoneCall">
				<image src="../../static/image/ico@2x.png" mode=""></image>
				<span>电话联系</span>
			</div> -->
		</div>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				msgMore: false, // 是否显示更多公司消息
				detail: null, // 详情信息
				companyList: [], // 公司其他岗位
			};
		},
		onLoad({
			id
		}) {
			this.getJobDetail(id)

		},
		computed: {
			covers() {
				return [{
					id: 0,
					latitude: this.detail && this.detail.lon,
					longitude: this.detail && this.detail.lat,
					width: 15,
					height: 15,
					iconPath: '../../static/image/juzhuudi@2x.png'
				}]
			}
		},
		methods: {
			async onClickChart() {
				let user = uni.getStorageSync('userInfo')
				const result = await this.$http.Message.setLastJob({
					from_id: user.id,
					to_id: this.detail.uid,
					job_id: this.detail.id
				})
				uni.navigateTo({
					url: '../message/chart?sendId=' + this.detail.uid
				})
			},
			// 获取招聘详情
			async getJobDetail(id) {
				const {
					data
				} = await this.$http.Recruit.getJobDetail(id)
				this.detail = data
				this.getJob()
			},
			// 获取招聘公司其他岗位
			async getJob() {
				const {
					data
				} = await this.$http.Recruit.getJob({
					page: 1,
					size: 10,
					name: this.detail.name
				})
				this.companyList = data.data
			},

			onClickMoreMsg() {
				this.msgMore = !this.msgMore
			},
			// 投递简历
			async onClickDelivery() {
				let user = uni.getStorageSync('userInfo')
				if (!user.cv_url) {
					return uni.showToast({
						title: '请先上传附件简历',
						icon: 'none'
					})
				}
				if (!user.current_job_name) {
					return uni.showToast({
						title: '您还没编辑在线简历，请先编辑简历',
						icon: 'none'
					})
				}
				const {
					code,
					msg
				} = await this.$http.Recruit.delivery(this.detail.id)
				uni.showToast({
					title: code == 200 ? "投递成功" : msg,
					icon: 'none'
				})
				if (code == 200) this.sendIm()
			},
			// 发送投递简历
			async sendIm() {
				const user = uni.getStorageSync('userInfo')
				const {
					code
				} = await this.$http.Message.sendIm({
					to_id: this.detail.uid,
					message: 'TYPE_DELIVERY_' + this.detail.uid + '&JIANLI=' + user.cv_url
				})

			},
			// 进入公司其他岗位详情
			onClickDetail({
				id
			}) {
				uni.redirectTo({
					url: '/pages/index/detail?id=' + id
				})
			},
			// 进入公司详情
			onClickCompany() {
				uni.navigateTo({
					url: '/pages/index/company?id=' + this.detail.company_id
				})
			},
			// 打开地图
			openMap() {
				uni.openLocation({
					latitude: Number(this.detail.lon),
					longitude: Number(this.detail.lat),
					complete(res) {
						console.log(res)
					}
				})
			},
			// 打电话
			onClickPhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.detail.mobile
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.detail-page {
		padding: 0 32upx;
		padding-bottom: calc(129upx + env(safe-area-inset-bottom));


		.wrap {
			box-shadow: 0px 0px 10px 2px rgba(241, 241, 241, 1);
			background: #fff;
			border-radius: 8upx;
			padding: 32upx;
			margin-top: 20upx;
		}

		.post-wrap {
			display: flex;
			align-items: center;
			margin-top: 10upx;

			.left {
				flex: 1;

				span {
					color: #28211F;
					font-size: 28upx;
					font-weight: 600;
				}

				p {
					color: #666E7A;
					font-size: 22upx;
					font-weight: 400;
				}
			}

			.price {
				color: #2AABE2;
				font-size: 28upx;
				font-weight: 600;
			}
		}

		.post-person-wrap {
			margin-top: 20upx;
			display: flex;
			align-items: center;
			padding: 34upx;

			.avatar {
				width: 82upx;
				height: 82upx;
				border-radius: 82upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 82upx;
				}
			}

			.info {
				margin-left: 22upx;

				h4 {
					color: #28211F;
					font-size: 28upx;
					line-height: 28upx;
					font-weight: 600;
				}

				p {
					color: #666E7A;
					font-size: 22upx;
					line-height: 22upx;
					font-weight: 400;
					margin-top: 16upx;
				}
			}
		}

		.job-intro {
			h3 {
				color: #28211F;
				font-weight: 600;
				font-size: 28upx;
			}

			.labels {
				margin-top: 20upx;
				margin-bottom: 26upx;

				.label {
					color: #666666;
					font-size: 24upx;
					font-weight: 400;
					padding: 0 16upx;
					height: 44upx;
					line-height: 44upx;
					border-radius: 4upx;
					background: #F2F2F2;
					display: inline-block;
				}
			}

			.msg {
				color: #666E7A;
				font-size: 24upx;
				font-weight: 400;
				max-height: 204upx;
				line-height: 36upx;
				overflow: hidden;

				span {
					color: #666E7A;
					font-size: 24upx;
					font-weight: 400;
				}
			}

			.msg-more {
				max-height: unset;
			}

			.more {
				color: #2AABE2;
				font-size: 24upx;
				font-weight: 400;
				line-height: 24upx;
				margin-top: 4upx;
			}

		}

		.company {
			padding: 34upx;

			map {
				width: 100%;
			}

			.company-info {
				margin-bottom: 32upx;

				.info {
					display: flex;
					align-items: center;

					.avatar {
						width: 82upx;
						height: 82upx;
						border-radius: 82upx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 82upx;
						}
					}

					.name-info {
						margin-left: 22upx;
						display: flex;
						flex-direction: column;

						span {
							color: #28211F;
							font-size: 28upx;
							line-height: 28upx;
							font-weight: 600;
						}

						p {
							margin-top: 16upx;
							font-size: 22upx;
							line-height: 22upx;
							font-weight: 400;
							color: #666E7A;
						}
					}
				}
			}

		}

		.more-post {
			margin-bottom: calc(68upx + 88upx);

			h3 {
				color: #28211F;
				font-size: 28upx;
				line-height: 28upx;
				font-weight: 600;
			}

			.list {
				.item {
					padding-top: 32upx;
					border-bottom: 1px solid #EEEEEE;
					padding-bottom: 32upx;
					background: #fff;
					border-radius: 8upx;
					margin-bottom: 20upx;

					&:last-of-type {
						border-bottom: unset;
					}

					.item-title {
						display: flex;
						align-items: center;

						.info {
							display: flex;
							align-items: center;
							flex: 1;

							image {
								margin-right: 22upx;
								width: 40upx;
								height: 40upx;
								border-radius: 40upx;
							}

							span {
								color: #666E7A;
								font-size: 24upx;
								font-weight: 400;
							}
						}

						.price {
							color: #2AABE2;
							font-size: 28upx;
							font-weight: 600;
						}
					}

					.post {
						display: flex;
						flex-direction: column;

						span {
							margin-top: 24upx;
							font-size: 28upx;
							color: #28211F;
							font-weight: 600;
						}

						p {
							font-size: 24upx;
							color: #666E7A;
							font-weight: 400;
							margin-top: 20upx;
						}
					}

					.bottom {
						display: flex;
						align-items: center;
						margin-top: 16upx;

						.labels {
							flex: 1;
							display: flex;
							align-items: center;

							.label {
								border-radius: 4upx;
								margin-right: 16upx;
								padding: 0 16upx;
								background: #F2F2F2;
								height: 44upx;
								line-height: 44upx;
								font-size: 24upx;
								color: #666;
								font-weight: 400;
							}
						}

						.address {
							color: #666E7A;
							font-size: 22upx;
							font-weight: 400;
						}
					}
				}
			}


		}

		.action-wrap {
			position: fixed;
			bottom: 0%;
			left: 0%;
			right: 0;
			border-top: 1px solid #EEEEEE;
			background: #fff;
			box-shadow: 0px 3px 10px #EEEEEE;

			padding: 20upx 32upx;
			padding-bottom: env(safe-area-inset-bottom);
			display: flex;
			align-items: center;

			.btn-wrap {
				display: flex;
				align-items: center;
				flex: 1;
			}

			button {
				width: 320upx;
				height: 88upx;
				border-radius: 88upx;
				color: #fff;
				font-size: 24upx;
				font-weight: 500;
				line-height: 88upx;
				background: #2AABE2;
				margin: 0;

				&:last-of-type {
					margin-left: 50upx;
					color: #2AABE2;
					border: 1px solid #2AABE2;
					background: #fff;

					&::after {
						border-color: #fff;
					}
				}
			}

			.mobile-wrap {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 33upx;
					height: 37upx;
					margin-bottom: 14upx;
				}

				span {
					color: #666E7A;
					font-size: 20upx;
					font-weight: 400;
					line-height: 20upx;
				}
			}

		}
	}
</style>
